<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>龙华系统研发中心官网</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            background: linear-gradient(135deg, rgba(106, 17, 203, 0.9), rgba(37, 117, 252, 0.9));
            color: white; /* 将全局文字颜色设置为白色 */
        }
        .container {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            text-align: center;
            width: 300px;
            margin: auto;
            margin-top: 100px;
        }
        h1 {
            margin-bottom: 20px;
            font-size: 24px;
            color: black; /* 将标题颜色设置为白色 */
        }
        input {
            margin: 10px 0;
            padding: 12px;
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            box-sizing: border-box;
        }
        input:focus {
            border-color: #007bff;
            outline: none;
        }
        .password-container {
            position: relative;
        }
        .password-container input {
            padding-right: 40px;
        }
        .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #007bff;
            font-size: 14px;
        }
        button {
            padding: 12px;
            width: 100%;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            margin-top: 10px;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #0056b3;
        }
        .message {
            margin-top: 20px;
            font-size: 14px;
            color: red;
        }
        .hidden {
            display: none;
        }
        .welcome-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(135deg, rgba(106, 17, 203, 0.9), rgba(37, 117, 252, 0.9));
            padding: 40px;
            box-shadow: none;
            text-align: center;
            overflow: auto;
        }
        .welcome-container h1 {
            color: white; /* 设置标题颜色为白色 */
            font-size: 36px;
            margin-bottom: 20px;
        }
        .welcome-container p {
            font-size: 20px;
            margin: 20px 0;
            color: white; /* 设置段落颜色为白色 */
        }
        .logout-btn {
            background-color: #dc3545;
            font-size: 16px;
            padding: 10px;
            margin-top: 20px;
        }
        .logout-btn:hover {
            background-color: #c82333;
        }
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #007bff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .nav {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 20px;
        }
        .nav button {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            margin: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .nav button:hover {
            background-color: #0056b3;
        }
        .content {
            margin-top: 20px;
            text-align: left;
            color: white; /* 设置内容文字颜色为白色 */
        }
    </style>
</head>
<body>
    <!-- 登录界面 -->
    <div id="loginPage" class="container">
        <h1>登录系统</h1>
        <input type="text" id="username" placeholder="用户名">
        <div class="password-container">
            <input type="password" id="password" placeholder="密码">
            <span class="toggle-password" id="togglePassword">显示</span>
        </div>
        <button id="loginBtn">登录</button>
        <div class="message" id="message"></div>
        <div class="loader hidden" id="loader"></div>
    </div>

    <!-- 欢迎界面 -->
    <div id="welcomePage" class="welcome-container hidden">
        <h1>欢迎！</h1>
        <p>您已成功登录系统。</p>
        <div class="nav">
            <button id="aboutBtn">关于我们</button>
            <button id="mailBtn">邮件</button>
            <button id="profileBtn">个人中心</button>
            <button id="productBtn">产品发布</button>
            <button id="newsBtn">新闻中心</button>
        </div>
        <div class="content" id="content">
            <!-- 动态内容将显示在这里 -->
        </div>
        <button id="logoutBtn" class="logout-btn">退出登录</button>
    </div>

    <script>
        // 预定义的有效用户名和密码以及邮箱
        const validCredentials = {
            "钟可怡": { password: "123456", email: "3410114@LCS.com" },
            "冯浩哲": { password: "123456", email: "3410784314@qq.com" }
        };

        // 获取页面元素
        const loginPage = document.getElementById('loginPage');
        const welcomePage = document.getElementById('welcomePage');
        const usernameInput = document.getElementById('username');
        const passwordInput = document.getElementById('password');
        const messageBox = document.getElementById('message');
        const togglePassword = document.getElementById('togglePassword');
        const loader = document.getElementById('loader');
        const content = document.getElementById('content');

        // 检查是否已登录
        if (localStorage.getItem('isLoggedIn') === 'true') {
            loginPage.classList.add('hidden');
            welcomePage.classList.remove('hidden');
        }

        // 切换密码可见性
        togglePassword.addEventListener('click', function() {
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                togglePassword.textContent = '隐藏';
            } else {
                passwordInput.type = 'password';
                togglePassword.textContent = '显示';
            }
        });

        // 获取登录按钮并添加点击事件监听器
        document.getElementById('loginBtn').addEventListener('click', function() {
            const username = usernameInput.value;
            const password = passwordInput.value;

            // 检查用户名和密码是否为空
            if (!username || !password) {
                showMessage("用户名和密码不能为空！", "red");
                return;
            }

            // 检查用户名和密码长度
            if (username.length < 3 || password.length < 6) {
                showMessage("用户名至少3位，密码至少6位！", "red");
                return;
            }

            // 显示加载动画
            loader.classList.remove('hidden');
            messageBox.innerHTML = '';

            // 模拟网络请求延迟
            setTimeout(() => {
                // 验证用户名和密码
                if (validCredentials[username] && validCredentials[username].password === password) {
                    showMessage("登录成功！", "green");
                    loader.classList.add('hidden');
                    // 保存登录状态
                    localStorage.setItem('isLoggedIn', 'true');
                    // 隐藏登录界面，显示欢迎界面
                    loginPage.classList.add('hidden');
                    welcomePage.classList.remove('hidden');
                } else {
                    showMessage("用户名或密码错误！", "red");
                    loader.classList.add('hidden');
                }
            }, 1000);
        });

        // 获取退出登录按钮并添加点击事件监听器
        document.getElementById('logoutBtn').addEventListener('click', function() {
            // 清除登录状态
            localStorage.removeItem('isLoggedIn');
            // 隐藏欢迎界面，显示登录界面
            welcomePage.classList.add('hidden');
            loginPage.classList.remove('hidden');
            // 清空输入框和消息
            usernameInput.value = '';
            passwordInput.value = '';
            messageBox.innerHTML = '';
            content.innerHTML = '';
        });

        // 显示消息的函数
        function showMessage(message, color) {
            messageBox.innerHTML = message;
            messageBox.style.color = color; // 留下原有颜色设置
        }

        // 关于我们
        document.getElementById('aboutBtn').addEventListener('click', function() {
            content.innerHTML = `
                <h2>关于我们</h2>
                <p>我们是一家致力于提供优质服务的科技公司，专注于技术创新和客户满意度。——龙华系统研发中心</p>
            `;
        });

        // 邮件
        document.getElementById('mailBtn').addEventListener('click', function() {
            content.innerHTML = `
                <h2>邮件</h2>
                <ul>
                    <li>邮件1：欢迎加入我们的团队！</li>
                    <li>邮件2：产品更新通知</li>
                    <li>邮件3：会议邀请</li>
                </ul>
            `;
        });

        // 个人中心
        document.getElementById('profileBtn').addEventListener('click', function() {
            const username = usernameInput.value;
            const email = validCredentials[username].email;
            content.innerHTML = `
                <h2>个人中心</h2>
                <p>用户名：${username}</p>
                <p>邮箱：${email}</p>
                <p>注册时间：2023-01-01</p>
            `;
        });

        // 产品发布
        document.getElementById('productBtn').addEventListener('click', function() {
            content.innerHTML = `
                <h2>产品发布</h2>
                <ul>
                    <li>产品1：LCS_GCM</li>
                    <li>产品2：梦不落电脑</li>
                    <li>产品3：龙华系统</li>
                </ul>
            `;
        });

        // 新闻中心
        document.getElementById('newsBtn').addEventListener('click', function() {
            content.innerHTML = `
                <h2>新闻中心</h2>
                <ul>
                    <li>新闻1：公司荣获创新奖</li>
                    <li>新闻2：新产品发布会圆满成功</li>
                    <li>新闻3：OSC源创会</li>
                </ul>
            `;
        });
    </script>
</body>
</html>
